<template>
  <el-table
    :data="permissionTree"
    style="width: 100%; margin-bottom: 20px"
    row-key="_id"
    stripe
    border>
    <el-table-column prop="name" label="名称" header-align="center" />
    <el-table-column
      prop="code"
      label="权限"
      width="300"
      header-align="center" />
    <el-table-column prop="updatedAt" label="修改时间" header-align="center" />
    <el-table-column label="操作" width="380" header-align="center">
      <template #default="{ row }">
        <el-row justify="center">
          <el-button
            type="success"
            small
            :icon="Plus"
            @click="addPermission(row)"
            :disabled="row.level == 4 ? true : false"
            >{{ row.level == 4 ? "添加功能" : "添加菜单" }}</el-button
          >
          <el-button
            type="primary"
            small
            :icon="Edit"
            @click="updatePermission(row)"
            :disabled="row.level == 1 ? true : false"
            >编辑</el-button
          >
          <el-popconfirm
            :title="`你确定要删除&quot;${row.name}&quot;吗？`"
            width="220px"
            @confirm="handleDelmenu(row._id)">
            <template #reference>
              <el-button
                type="danger"
                small
                :icon="Delete"
                :loading="loading"
                :disabled="row.level == 1 ? true : false"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </el-row>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    v-model="dialogVisible"
    :title="menuParams._id ? '更新菜单' : '添加菜单'"
    width="500">
    <el-form :model="menuParams" :rules="rules" ref="ruleFormRef">
      <el-form-item label="权限名称：" prop="name">
        <el-input v-model="menuParams.name" placeholder="请输入权限名称" />
      </el-form-item>
      <el-form-item label="权限值：" prop="code">
        <el-input v-model="menuParams.code" placeholder="请输入权限值" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          @click="handleConfirm(ruleFormRef)"
          :loading="loading">
          提交
        </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="Menu">
  //#region 引入组件
  import { ref, reactive, toRefs, onMounted } from "vue";
  import { storeToRefs } from "pinia";
  import { ElMessage } from "element-plus";
  import type { FormInstance, FormRules } from "element-plus";
  import { Delete, Edit, Plus } from "@element-plus/icons-vue";
  import type { IMenuParams } from "@/apis/acl/menu/type";
  import usePermissionStore from "@/store/modules/permission";
  //#endregion

  //#region 状态state

  const permissionStore = usePermissionStore();

  const state = reactive<{
    dialogVisible: boolean;
    menuParams: IMenuParams;
  }>({
    dialogVisible: false,
    menuParams: { name: "" },
  });

  const { dialogVisible, menuParams } = toRefs(state);

  const { permissionTree, loading } = storeToRefs(permissionStore);
  //#endregion

  //#region 表单

  const ruleFormRef = ref<FormInstance>();

  // 表单验证规则
  const rules = reactive<FormRules<IMenuParams>>({
    name: [
      {
        required: true,
        message: "请输入权限名称",
        trigger: "blur",
      },
    ],
  });

  /**
   * 表单提交按钮
   * @param formEl 表单实例
   */
  const handleConfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    const valid = await formEl.validate();
    if (!valid) {
      ElMessage.error("请按照要求填写表单！");
      return;
    }

    await permissionStore.addOrUpdatePermission(menuParams.value);
    dialogVisible.value = false;
  };

  //#endregion

  /** 页面加载完成钩子函数 */
  onMounted(() => {
    getHasPermissionList();
  });

  /** 获取权限数据函数 */
  const getHasPermissionList = async () => {
    await permissionStore.getPermissionList();
  };

  /** 新增按钮方法 */
  const addPermission = async (row: IMenuParams) => {
    dialogVisible.value = true;
    ruleFormRef.value?.resetFields();
    menuParams.value = { name: "" };
    menuParams.value.level = (row.level as number) + 1;
    menuParams.value.pid = row._id;
  };

  /** 修改按钮方法 */
  const updatePermission = (row: IMenuParams) => {
    dialogVisible.value = true;
    Object.assign(menuParams.value, {});
    menuParams.value._id = row._id;
    menuParams.value.name = row.name;
    menuParams.value.code = row.code;
    menuParams.value.level = row.level as number;
  };

  /** 删除按钮方法 */
  const handleDelmenu = (id: string) => {
    permissionStore.deletePermission(id);
  };
</script>

<style scoped lang="scss"></style>
